<template>
    <div class="result">
         <h3>考试结果</h3>
         <p>用户: <span>user</span></p>
         <p>试卷名称: <span>{{ obj.name }}</span></p>
         <p>总时间: <span>{{ obj.time | formatime }}</span></p>
         <p>考试时长: <span>{{ obj.second | formatime }}</span></p>
         <p>答对: <span>{{ obj.right }}</span>题</p>
         <p>答错: <span>{{ obj.wrong }}</span>题</p>
         <p>成绩: <span>{{ obj.score }}</span>分</p>
         <div>
            <router-link to="/index">回到首页</router-link>
         </div>
    </div>
</template>

<script>
export default {
     // 过滤器 （工具类函数）
     filters: {
         formatime(value) {
            let h = 0;
            let m = 0;
            let s = 0;
            h = Math.floor(value / 3600);
            m = Math.floor(value % 3600 / 60);
            s = Math.floor(value % 60);
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return `${h}:${m}:${s}`;
        }
    },
    data(){
        return {
            obj: {}
        }
    },
    // 初始化
    created(){
        // 获取URL的参数
        let  {score , right , wrong , second,time , name } = this.$route.query
        // 赋值
        this.obj = {score , right , wrong , second,time , name }
    }
}

</script>

<style lang="less">
@import '../common/less/varible.less';
.result {
    padding: @pad;
    h3 {
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        border-bottom: 3px solid #000;
    }
    p {
        font-size: 17px;
        padding: 10px 0px;
        span {
            font-weight: bold;
        }
    }

    div {
        text-align: center;
        padding: 50px 0;
        a {
            font-size: 18px;
            color: #ffc0cb;
        }
    }

}
</style>